<%@ page pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='fxsdjsz'/></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }

        .layui-form-label {
            width: 150px;
        }

        .layui-input-block {
            margin-left: 180px;
        }
    </style>
</head>

<body>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

    <div class="layui-container">

        <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

            <form:form commandName="level" method="post">

                <form:hidden path="id"/>
                <form:hidden path="level"/>
                <input type="hidden" name="_method" value="PUT">

                <div class="layui-form-item">
                    <label class="layui-form-label"><fmt:message key='djmc'/></label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="name" value="${level.name}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><fmt:message key='yjyjbl'/></label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="firstLevelScale" value="${level.firstLevelScale}" placeholder="<fmt:message key='xs(0~1)'/>">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><fmt:message key='ejyjbl'/></label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="secondLevelScale" value="${level.secondLevelScale}" placeholder="<fmt:message key='xs(0~1)'/>">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><fmt:message key='djtp'/></label>
                    <div class="layui-input-inline">
                        <input type="button" class="layui-btn upload-image-btn" value="<fmt:message key='sctp'/>">
                        <form:hidden path="image"/>
                        <div class="image-box">
                            <c:if test="${not empty level.image}">
                                <img src="${store_domain}/uploads/${level.image}" class="preview" style="max-width: 300px; max-height: 300px; margin-top: 20px;">
                            </c:if>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><fmt:message key='sqtj'/></label>
                    <div class="layui-input-block">
                        <input type="radio" lay-filter="applyType" title="<fmt:message key='mfjr'/>" name="applyType" value="1" <c:if test="${level.applyType == 1}">checked</c:if>>
                        <input type="radio" lay-filter="applyType" title="<fmt:message key='gmzdsp'/>" name="applyType" value="2" <c:if test="${level.applyType == 2}">checked</c:if>>
                    </div>
                </div>

                <div class="select-goods <c:if test="${level.applyType != 2}">layui-hide</c:if>">

                    <div class="layui-form-item">
                        <label class="layui-form-label"><fmt:message key='xzzdsp'/></label>
                        <div class="layui-input-block">
                            <input type="button" class="layui-btn select-goods-btn" value="<fmt:message key='xzsp'/>">
                            <form:hidden path="goodsIds"/>
                            <table class="layui-table goods-table">
                                <tr>
                                    <th><fmt:message key='spid'/></th>
                                    <th><fmt:message key='spmc'/></th>
                                    <th><fmt:message key='cz'/></th>
                                </tr>
                                <c:forEach var="item" items="${goodsList}">
                                    <tr id="${item.id}">
                                        <td>${item.id}</td>
                                        <td>${item.name}</td>
                                        <td><input type="button" class="layui-btn layui-btn-danger remove-goods layui-btn-xs" data-id="${item.id}" value="<fmt:message key='sc'/>"></td>
                                    </tr>
                                </c:forEach>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><fmt:message key='zdjstj'/></label>
                    <div class="layui-input-block">
                        <input type="checkbox" lay-filter="enableSubDistributorNum" lay-skin="primary" title="<fmt:message key='xjfxssl'/>" <c:if test="${level.enableSubDistributorNum}">checked</c:if>>
                        <input type="checkbox" lay-filter="enableChildDistributorNum" lay-skin="primary" title="<fmt:message key='zsfxssl'/>" <c:if test="${level.enableChildDistributorNum}">checked</c:if>>
                        <input type="checkbox" lay-filter="enableSubMemberNum" lay-skin="primary" title="<fmt:message key='xxhys'/>" <c:if test="${level.enableSubMemberNum}">checked</c:if>>
                        <input type="checkbox" lay-filter="enableSubMemberOrderNum" lay-skin="primary" title="<fmt:message key='xxhydds'/>" <c:if test="${level.enableSubMemberOrderNum}">checked</c:if>>
                        <input type="checkbox" lay-filter="enableSubMemberOrderMoney" lay-skin="primary" title="<fmt:message key='xxhyddje'/>" <c:if test="${level.enableSubMemberOrderMoney}">checked</c:if>>
                        <input type="checkbox" lay-filter="enableOrderNum" lay-skin="primary" title="<fmt:message key='cjdds'/>" <c:if test="${level.enableOrderNum}">checked</c:if>>
                        <input type="checkbox" lay-filter="enableOrderMoney" lay-skin="primary" title="<fmt:message key='cjje'/>" <c:if test="${level.enableOrderMoney}">checked</c:if>>
                        <form:hidden path="enableSubDistributorNum"/>
                        <form:hidden path="enableChildDistributorNum"/>
                        <form:hidden path="enableSubMemberNum"/>
                        <form:hidden path="enableSubMemberOrderNum"/>
                        <form:hidden path="enableSubMemberOrderMoney"/>
                        <form:hidden path="enableOrderNum"/>
                        <form:hidden path="enableOrderMoney"/>
                    </div>
                </div>


                <div class="layui-form-item sub-distributor-num <c:if test="${!level.enableSubDistributorNum}">layui-hide</c:if>">
                    <label class="layui-form-label"><fmt:message key='xjfxssl'/></label>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input" name="subDistributorNum" value="${level.subDistributorNum}">
                        </div>
                        <div class="layui-form-mid"> ~</div>
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input" name="subDistributorMaxNum" value="${level.subDistributorMaxNum}">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item child-distributor-num <c:if test="${!level.enableChildDistributorNum}">layui-hide</c:if>">
                    <label class="layui-form-label"><fmt:message key='zsfxssl'/></label>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input" name="childDistributorNum" value="${level.childDistributorNum}">
                        </div>
                        <div class="layui-form-mid"> ~</div>
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input" name="childDistributorMaxNum" value="${level.childDistributorMaxNum}">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item sub-member-num <c:if test="${!level.enableSubMemberNum}">layui-hide</c:if>">
                    <label class="layui-form-label"><fmt:message key='xxhys'/></label>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input" name="subMemberNum" value="${level.subMemberNum}">
                        </div>
                        <div class="layui-form-mid"> ~</div>
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input" name="subMemberMaxNum" value="${level.subMemberMaxNum}">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item sub-member-order-num <c:if test="${!level.enableSubMemberOrderNum}">layui-hide</c:if>">
                    <label class="layui-form-label"><fmt:message key='xxhydds'/></label>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input" name="subMemberOrderNum" value="${level.subMemberOrderNum}">
                        </div>
                        <div class="layui-form-mid"> ~</div>
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input" name="subMemberOrderMaxNum" value="${level.subMemberOrderMaxNum}">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item sub-member-order-money <c:if test="${!level.enableSubMemberOrderMoney}">layui-hide</c:if>">
                    <label class="layui-form-label"><fmt:message key='xxhyddje'/></label>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input" name="subMemberOrderMoney" value="${level.subMemberOrderMoney}">
                        </div>
                        <div class="layui-form-mid"> ~</div>
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input" name="subMemberOrderMaxMoney" value="${level.subMemberOrderMaxMoney}">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item order-num <c:if test="${!level.enableOrderNum}">layui-hide</c:if>">
                    <label class="layui-form-label"><fmt:message key='cjdds'/></label>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input" name="orderNum" value="${level.orderNum}">
                        </div>
                        <div class="layui-form-mid"> ~</div>
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input" name="orderMaxNum" value="${level.orderMaxNum}">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item order-money <c:if test="${!level.enableOrderMoney}">layui-hide</c:if>">
                    <label class="layui-form-label"><fmt:message key='cjje'/></label>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input" name="orderMoney" value="${level.orderMoney}">
                        </div>
                        <div class="layui-form-mid"> ~</div>
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input" name="orderMaxMoney" value="${level.orderMaxMoney}">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <input type="button" value="<fmt:message key='qd1'/>" id="submit" class="layui-btn">
                    </div>
                </div>

            </form:form>
        </div>
    </div>
</div>

<form action="${web_domain}/upload/image" method="post" id="upload-image-form" enctype="multipart/form-data" class="layui-hide">
    <input id="upload-image-file" name="file" type="file"/>
</form>

<script>

    layui.use(['form', 'layer'], function () {

        var layer = layui.layer;
        var form = layui.form;

        $(".select-goods-btn").click(function () {
            layer.open({
                type: 2,
                content: "${web_domain}/mall/subject/selectGoods",
                area: ["90%", "90%"],
                btn: ["<fmt:message key='qd1'/>", "<fmt:message key='ejyjbl'/>qx"],
                yes: function (index, layero) {
                    var goods = layero.find('iframe').contents().find("input.feijin-check:checked");
                    goods.each(function (index, item) {
                        var id = item.getAttribute("data-id");
                        if ($("#" + id).length === 0) {
                            var name = item.getAttribute("data-name");
                            $(".goods-table").append('<tr id="' + id + '"><td>' + id + '</td><td>' + name + '</td><td><input type="button" class="layui-btn layui-btn-danger layui-btn-xs remove-goods" data-id="' + id + '" value="<fmt:message key='sc'/>"></td></tr>');
                        }
                    });
                    layer.close(index);
                }
            });
        });

        $(".upload-image-btn").click(function () {
            $("#upload-image-file").click();
        });

        $("#upload-image-file").change(function () {
            $("#upload-image-form").ajaxSubmit({
                success: function (res) {
                    if (res.status) {
                        $("#image").val(res.path);
                        $(".image-box").html('<img src="${store_domain}/uploads/' + res.path + '" class="preview" style="max-width: 300px; max-height: 300px; margin-top: 20px" />');
                    }
                },
                error: function () {
                    layer.msg("<fmt:message key='tpscyc'/>");
                }
            });
        });

        form.on('checkbox(enableSubDistributorNum)', function (e) {
            if (e.elem.checked) {
                $(".sub-distributor-num").removeClass("layui-hide");
                $("#enableSubDistributorNum").val(true);
            } else {
                $(".sub-distributor-num").addClass("layui-hide");
                $("#enableSubDistributorNum").val(false);
            }
        });

        form.on('checkbox(enableChildDistributorNum)', function (e) {
            if (e.elem.checked) {
                $(".child-distributor-num").removeClass("layui-hide");
                $("#enableChildDistributorNum").val(true);
            } else {
                $(".child-distributor-num").addClass("layui-hide");
                $("#enableChildDistributorNum").val(false);
            }
        });

        form.on('checkbox(enableSubMemberNum)', function (e) {
            if (e.elem.checked) {
                $(".sub-member-num").removeClass("layui-hide");
                $("#enableSubMemberNum").val(true);
            } else {
                $(".sub-member-num").addClass("layui-hide");
                $("#enableSubMemberNum").val(false);
            }
        });

        form.on('checkbox(enableSubMemberOrderNum)', function (e) {
            if (e.elem.checked) {
                $(".sub-member-order-num").removeClass("layui-hide");
                $("#enableSubMemberOrderNum").val(true);
            } else {
                $(".sub-member-order-num").addClass("layui-hide");
                $("#enableSubMemberOrderNum").val(false);
            }
        });

        form.on('checkbox(enableSubMemberOrderMoney)', function (e) {
            if (e.elem.checked) {
                $(".sub-member-order-money").removeClass("layui-hide");
                $("#enableSubMemberOrderMoney").val(true);
            } else {
                $(".sub-member-order-money").addClass("layui-hide");
                $("#enableSubMemberOrderMoney").val(false);
            }
        });

        form.on('checkbox(enableOrderNum)', function (e) {
            if (e.elem.checked) {
                $(".order-num").removeClass("layui-hide");
                $("#enableOrderNum").val(true);
            } else {
                $(".order-num").addClass("layui-hide");
                $("#enableOrderNum").val(false);
            }
        });

        form.on('checkbox(enableOrderMoney)', function (e) {
            if (e.elem.checked) {
                $(".order-money").removeClass("layui-hide");
                $("#enableOrderMoney").val(true);
            } else {
                $(".order-money").addClass("layui-hide");
                $("#enableOrderMoney").val(false);
            }
        });

        form.on('radio(applyType)', function (e) {
            if (e.value === "1") {
                $(".select-goods").addClass("layui-hide");
            } else {
                $(".select-goods").removeClass("layui-hide");
            }
        });

        $("body").on("click", ".remove-goods", function () {
            $(this).parent().parent().remove();
        });

        $("#submit").click(function () {

            //如果申请条件是购买指定商品，合并商品id
            if ($("[name='applyType']:checked").val() === "2") {
                var ids = [];
                $(".goods-table tr").each(function (index, item) {
                    if (item.id) {
                        ids.push(item.id);
                    }
                });
                if (ids.length === 0) {
                    layer.msg("<fmt:message key='qxzsp'/>");
                    return;
                }
                $("#goodsIds").val(ids.join(";"));
            }

            $("#level").ajaxSubmit({
                success: function (res) {
                    if (res.status) {
                        layer.alert("<fmt:message key='bccg'/>", function () {
                            parent.location.reload();
                        });
                    } else {
                        layer.alert(res.message);
                    }
                }
            });
        });
    });

</script>

</body>
</fmt:bundle>
</html>